<template>
  <div id="layout_root" :class="btnFlag?'gundong':''">
    <div style="width:100%;background: #508CC2;">
      <div style="height: 35px;line-height: 35px;width: 1200px;margin: 0 auto">
        <div class="userPanel3" v-for="(item,index) in navBarList" :key="index">
          <a href="javascript:void(0)" @click="btnClick(item.path)">{{item.title }}<p></p></a>
<!--          <router-link :to="item.path">
            {{ item.title }}<p></p>
          </router-link>-->
        </div>
        <div class="userPanel2">
          <div v-if="!name" style="float: left;height: 35px;">
            <router-link to="/login">您好，请登录</router-link>
            <p style="margin: 0 4px;"></p>
            <router-link to="/register/common" style="color:#FD9500">免费注册</router-link>
          </div>
          <div v-if="name" style="float: left;height: 35px;">
            <div style="float: left;height: 35px;"
                 :style="{'margin-right':showAllIsdot?'10px':'0'}"
            >
              <el-badge class="toolbar-subMenu-box" :is-dot="showAllIsdot"
                        style="top: -2px;line-height: 35px;height: 35px;"
              >
                <router-link to="/message">消息</router-link>
                <div class="toolbar-subMenu" style="width: 120px">
                  <!--                  <router-link v-for="(item,index) in activeTab" :key="index" :to="item.path">
                                      <el-badge is-dot>{{item.title}}</el-badge>
                                    </router-link>-->
                  <i style="top: -16px;position: absolute;left: 49px;font-size: 25px;" class="iconfont icon-jiantouarrow492"></i>
                  <router-link to="/notice/list">
                    <el-badge>公告</el-badge>
                  </router-link>
                  <router-link to="/message/comment">
                    <el-badge :value="commentTotel" :max="totalMax">评论</el-badge>
                  </router-link>
                  <router-link to="/message/notify">
                    <!--                    <el-badge :is-dot="showNotifyIsDot">消息通知</el-badge>-->
                    <el-badge :value="notifyTotel" :max="totalMax">消息通知</el-badge>
                  </router-link>
                </div>
              </el-badge>
            </div>
            <p style="float: left">|</p>
            <div style="float: left;height: 35px;">
              <el-popover popper-class="popper"
                          placement="bottom"
                          width="160"
                          trigger="hover"
              >
                <div>
                  <div style="width: 100%;height: 48px;margin-bottom: 16px;">
                    <router-link to="/user/profile">
                      <img style="width: 48px;border-radius:50%;float: left" :src="avatar">
                    </router-link>
                    <div
                      style="padding: 10px 0 10px 10px;width:100px;overflow: hidden;font-size: 16px;
                      font-weight: 500;
                      text-overflow: ellipsis; white-space: nowrap;color: #264238;float: left;"
                    >{{ user.nickName }}
                    </div>
                  </div>
                  <div class="amp-header-user-info">
                    <div>
                      <router-link style="color: #606266;text-decoration: none;"
                                   to="/user/profile"
                      >个人中心
                      </router-link>
                    </div>
                    <div @click="logout" class="amp-bg-color-danger-lv1 amp-color-white-lv1">
                      退出登录
                    </div>
                  </div>
                </div>
                <div slot="reference" style="height: 35px;line-height: 35px">
                  <div style="padding-right: 6px;float: left;height: 35px;">
                    <router-link to="/user/profile">
                      <img style="width: 28px;height:28px;border-radius: 50%;margin: 4px 0"
                           :src="avatar"
                           class="user-avatar"
                      >
                    </router-link>
                  </div>
                  <div style="float: right;height: 35px;">
                    <a href="javascript:void(0)">{{ user.nickName }}</a>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
          <p>|</p>
          <a href="javascript:void(0)" @click="AddFavorite('http://localhost:8080/home','社联首页')">加入收藏</a>
          <p>|</p>
          <el-tooltip placement="bottom" effect="light">
            <div slot="content">
              <img style="width: 111px;" src="@/assets/images/zut/wx.jpg">
            </div>
            <a href="javascript:void(0)">手机版</a>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listMessage, getMessage,listMessageBD } from '@/api/message'
import { globalBus } from '@/utils/globalBus'

export default {
  name: 'Hearder',
  inject: ['reload'],  //注入依赖
  data() {
    return {
      showAllIsdot: false,
      showCommentIsDot: false,
      showNotifyIsDot: false,
      notifyTotel: null,
      commentTotel: null,
      totalMax: 9,
      navBarList: [
        { path: '/home', title: '社联首页', class: 'top1' },
        {
          path: '/post/list', title: '组织机构', class: 'top3'
        },
        {
          path: '/dept/index', title: '社联社团', class: 'top5', display: 'none',
          subs: [
            { path: '', title: '科技文化类', class: '' },
            { path: '', title: '公益实践类', class: '' },
            { path: '', title: '运动休闲类', class: '' },
            { path: '', title: '艺术爱好类', class: 'last2' }
          ]
        },
        { path: '/activity/list', title: '社联活动', class: 'top7' },
        { path: '/notice/list', title: '通告公告', class: 'top2' },
        { path: '/news/list', title: '校园新闻', class: 'top4' },
        { path: '/honour/list', title: '光荣之星', class: 'top10' },
        { path: '/policy/list', title: '政策法规', class: 'top8' },
        { path: '/forum', title: '社联论坛', class: 'top6' },
        { path: '/trends', title: '社联动态', class: 'top9' },

        { path: '/elect/list', title: '换届选举', class: 'top11' },
        { path: '/pick/list', title: '社联风采', class: 'top12 last1' }
      ],
      activeTab: [
        { path: '/notice/list', title: '公告' },
        { path: '/message/comment', title: '评论' },
        { path: '/message/notify', title: '消息通知' }
      ],
      btnFlag: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop, true)
  },
  computed: {
    ...mapGetters(['avatar', 'name', 'user'])
  },
  created() {
    globalBus.$on('messageTotle', (res) => {
      this.getMessageInfo()
    })
    this.getMessageInfo()
  },
  methods: {
    scrollToTop() {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 35) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },

    //获取消息
    async getMessageInfo() {
      let queryParams = {
        readStatus: '0',
        status: '0',
        toId: this.user.userId,
        type:'1'
      }
      await listMessageBD(queryParams).then(response => {
        if (response.total > 0) {
          this.showNotifyIsDot = true
          this.notifyTotel = response.total
        } else {
          this.showNotifyIsDot = false
          this.notifyTotel = null
        }
      })
      await listMessage(queryParams).then(response => {
        if (response.total > 0) {
          this.showCommentIsDot = true
          this.commentTotel = response.total
        } else {
          this.showCommentIsDot = false
          this.commentTotel = null
        }
      })
      if (this.showNotifyIsDot || this.showCommentIsDot) {
        this.showAllIsdot = true
      } else {
        this.showAllIsdot = false
      }
    },

    //点击跳转
    btnClick(val) {
      sessionStorage.removeItem('postId')
      sessionStorage.removeItem('deptListName')
      /*if (val == '/post/list') {
        sessionStorage.removeItem('postId')
      } else if (val == '/dept/index') {
        sessionStorage.removeItem('deptListName')
      }*/
      this.$router.push(val)
      this.reload()
    },

    //退出登录
    async logout() {
      this.$confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/home'
        })
      })
    },

    // 加入收藏代码 Start -->
    AddFavorite(sURL, sTitle) {
      try {
        window.external.addFavorite(sURL, sTitle)
      } catch (e) {
        try {
          window.sidebar.addPanel(sTitle, sURL, '')
        } catch (e) {
          alert('加入收藏失败,请手动添加.')
        }
      }
    }
  },
  destroyed() {
    // 离开页面时需销毁滚动监听事件
    window.removeEventListener('scroll', this.scrollToTop)
  }
}
</script>

<style scoped>
.gundong{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1888;
}
/deep/ .el-badge__content.is-fixed.is-dot {
  right: 0px;
}

.el-badge__content.is-dot {
  height: 8px;
  width: 8px;
  padding: 0;
  right: 0;
  border-radius: 8px;
}

/deep/ .el-badge__content.is-fixed {
  top: 10px;
}

.toolbar-subMenu /deep/ .el-badge__content.is-fixed {
  /*top: 14px;*/
  right: 4px;
  top: 10px;
}

.toolbar-subMenu /deep/ .el-badge__content {
  padding: 0px 6px;
  border: none;
}

.el-badge {
  position: relative;
}

.el-badge:hover .toolbar-subMenu {
  display: block;
}

.el-badge .toolbar-subMenu {
  position: absolute;
  display: none;
  top: 36px;
  min-width: 96px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 8px 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  text-align: center;
  line-height: 32px;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, .06);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, .06);
  z-index: 9999;
}

.el-badge .toolbar-subMenu > a {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: block;
  color: #555666 !important;
  font-size: 14px;
  font-weight: 400;
}

.el-badge .toolbar-subMenu > a:hover {
  background: #f0f0f5
}

.amp-color-white-lv1 {
  color: #fff !important
}

.amp-bg-color-danger-lv1 {
  background-color: #e6564a !important
}

.amp-header-user-info > div {
  width: 100%;
  height: 28px;
  line-height: 26px;
  border-radius: 28px;
  border: 1px solid #a2a9a7;
  text-align: center;
  margin-top: 10px;
  cursor: pointer
}

.amp-header-user-info > div:hover {
  -webkit-box-shadow: 0 1px 4px #a2a9a7;
  box-shadow: 0 1px 4px #a2a9a7
}

.amp-header-user-info > div.amp-bg-color-danger-lv1 {
  border-color: #e6564a
}

.amp-header-user-info > div.amp-bg-color-danger-lv1:hover {
  -webkit-box-shadow: 0 1px 4px #e6564a;
  box-shadow: 0 1px 4px #e6564a
}

</style>
